javascript
<template>
	<view class="content">
		<navigation :title="song.name" class="navigation"></navigation>
		<p> <span class="iconfont">&#xe609;</span>网易云音乐</p>
		<view class="imageBox">
			<image :src="song.image" mode="" :class="[{'img': !stopRotate}, {'img-stop': stopRotate}]"
				class="imgPublic">
			</image>

		</view>
		<view class="button-area">
			<span class="iconfont" v-if="stopRotate" @click="continueRotation()">&#xe61c;</span>
			<span class="iconfont" v-else @click="stopRotation()">&#xe600;</span>
		</view>
			<scroll-view class="lyric" scroll-y="true">
				<view class="wrap"  :style="{ transform : 'translateY(' +  - (lyricIndex - 1) * 82  + 'rpx)' }">
					<view class="item" :class="{ active : lyricIndex == index}" v-for="(item,index) in song.lyric" :key="index">
						{{ item.lyric}}
					</view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
	import {
		listSong,
		listSongUrl,
		listSongLyric
	} from "../../request/request.js"
	export default {
		data() {
			return {
				song: {
					id: "",
					image: "",
					Url: "",
					name: "",
					lyric: "",
				},
				stopRotate: false,
				innerAudioContext: {},
				lyricIndex: 0,
			}
		},
		onLoad(option) {
			this.song.id = option.songId;
			listSongUrl(option.songId).then((res) => {
				this.song.Url = res.data.data[0].url
			});
			setTimeout(() => {
				this.onPlay()
			}, 500);
			listSong(option.songId).then((res) => {
				this.song.image = res.data.songs[0].al.picUrl
				this.song.name = res.data.songs[0].name

			});
			listSongLyric(this.song.id).then(res=>{
			let lyric=res.data.lrc.lyric
				let result = [];
				let re = /\[([^\]]+)\]([^[]+)/g;
				lyric.replace(re,($0,$1,$2)=>{
					result.push({ time : this.formatTimeToSec($1) , lyric : $2 });
				});
				this.song.lyric = result;
			});
			setTimeout(()=>{this.initIAC()},500);
		},
		methods: {
			onPlay() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = this.song.Url;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
					this.listenLyricIndex();
				});
				this.innerAudioContext = innerAudioContext;
				this.stopRotate = true;
			},
			//      onPause() {
			// this.innerAudioContext.pause();
			// console.log('暂停播放');
			//       },
			stopRotation() {
				this.stopRotate = true;
				this.innerAudioContext.pause();
				console.log('暂停播放');
				// this.onPause();
			},
			continueRotation() {
				this.stopRotate = false;
				this.innerAudioContext.play(); // 继续播放
				console.log('继续播放');
			},
			formatTimeToSec(time) {
				var arr = time.split(':');
				return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
			},
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.song.lyric.length; i++) {
						if (this.song.lyric[this.song.lyric.length - 1].time < this.innerAudioContext
							.currentTime) {
							this.lyricIndex = this.song.lyric.length - 1;
							break;
						}
						if (this.song.lyric[i].time < this.innerAudioContext.currentTime && this.song.lyric[i + 1]
							.time > this.innerAudioContext.currentTime) {
							this.lyricIndex = i;
						}
					}
				});
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
	}

	.content {
		height: 1500rpx;
		background-color: #1c1e1d;
		color: white;
		font-size: 30rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}



	image {
		margin: 50rpx auto;
		border-radius: 50%;
		animation: rotate 5s linear infinite;
		/* 添加旋转动画 */
		transform-origin: center;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
			/* 旋转180度 */
		}

		100% {
			transform: rotate(360deg);
			/* 旋转360度 */
		}
	}

	@keyframes shadow {
		0% {
			box-shadow: 0 0 20px rgba(255, 255, 255, 0);
			/* 开始时无阴影 */
		}

		50% {
			box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
			/* 中间时阴影深度达到最大（可根据需求调整透明度和阴影大小） */
		}

		100% {
			box-shadow: 0 0 20px rgba(255, 255, 255, 0);
			/* 结尾时无阴影 */
		}
	}

	.img {
		/* 添加旋转动画 */
		transform-origin: center;
		animation: rotate 5s linear infinite, shadow 5s linear infinite;
	}

	.img-stop {
		animation-play-state: paused;
		/* 停止旋转动画 */
	}

	.navigation {
		width: 100%;
		background-color: #1c1e1d;
		padding: 50rpx 0;
	}

	.imgPublic {
		height: 360rpx;
		width: 360rpx;
		margin-top: 120rpx;
		margin-left: 120rpx;
		box-shadow: 0 0 20px rgba(255, 255, 255, 0);
		/* 初始状态为无阴影 */
	}

	.button-area {
		height: 100rpx;
		position: absolute;
		left: 45%;
		top: 35%;
	}

	.button-area .iconfont {
		font-size: 90rpx;
		opacity: 0.7;
	}

	.imageBox {
		margin: 0 auto;
		width: 600rpx;
		height: 600rpx;
		background-image: url("../../static/images/disc.png");
		background-size: 600rpx;
		background-repeat: no-repeat;
	}

	.gouzi {
		width: 170rpx;
		height: 260rpx;
		background-image: url("../../static/images/needle.png");
		background-size: 260rpx;
		background-repeat: no-repeat;
		transition: transform 0.5s ease;
		/* 添加过渡效果 */
	}
	.lyric{ 
		 height:600rpx; 
		 line-height: 82rpx;
		 font-size:32rpx; 
		 text-align: center; 
		 color:#949495; 
		 overflow: hidden;}
	.active{ color:pink;}
	.lyric .wrap{ transition: .5s;}
	.lyric .item{ height:82rpx;}
</style>